<template>
	<view class="content">
		<view class="header">
			<view class="box">
				<text class="iconfont icon-left" @click="go()"></text>
				<text class="title">服务订单</text>
			</view>
		</view>
		<view class="select_box">
			<view class="item">
				<picker @change="checkOrderType" :value="typeIndex" :range="orderType" range-key="name">
					<view class="uni-input">{{orderType[typeIndex].name}}</view>
				</picker>
				<text class="iconfont icon-down1"></text>
			</view>
			<view class="item">
				<picker @change="checkOrderTime" :value="timeIndex" :range="orderTime" range-key="name">
					<view class="uni-input">{{orderTime[timeIndex].name}}</view>
				</picker>
				<text class="iconfont icon-down1"></text>
			</view>
			<view class="item">
				<picker @change="checkOrderStatus" :value="statusIndex" :range="orderStatus" range-key="name">
					<view class="uni-input">{{orderStatus[statusIndex].name}}</view>
				</picker>
				<text class="iconfont icon-down1"></text>
			</view> 
		</view>
		<view class="list">
			<view class="item" v-for="order in orderList">
				<view class="tit">
					<text class="fl">{{order.create_time}}</text>
					<text class="fr">{{order.status}}</text>
				</view>
				<text class="font">{{order.order_type}}</text>
				<view class="btn" v-if="order.pay_status == 10">立即付款</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array1: ['下单时间', '美国', '巴西', '日本'],
				index1: 0,
				array2: ['订单状态', '美国', '巴西', '日本'],
				index2: 0,
				orderType:[{type:'all',name:'合同类型'},{type:'service',name:'咨询'},{type:'file',name:'文件下载'},{type:'service',name:'合同审核'}],
				typeIndex:0,
				orderStatus:[{status:'all',name:'订单状态'},{ status:'payment',name:'未付款'},{ status:'underway',name:'正在进行'},{ status:'complete',name:'已完成'}],
				statusIndex:0,
				orderTime:[{time:'all',name:'创建时间'},{time:'week',name:'一周内'},{time:'month',name:'当月内'}],
				timeIndex:0,
				orderList:[],
				page:1,
				size:10,
				type:'',
				status:'',
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			bindPickerChange: function(e) {
				this.index = e.target.value
			},
			bindPickerChange1: function(e) {
				this.index1 = e.target.value
			},
			bindPickerChange2: function(e) {
				this.index2 = e.target.value
			},
			go(){
				uni.navigateBack({
					delta:1
				})
			},
			checkOrderType(e){
				let self = this;
				let typeIndex = e.target.value;
				self.typeIndex = typeIndex;
				self.type = self.orderType[typeIndex].type;
				self.getData();
			},
			checkOrderStatus(e){
				let self = this;
				let statusIndex = e.target.value;
				self.statusIndex = statusIndex;
				self.status = self.orderStatus[statusIndex].status;
				self.getData();
			},
			checkOrderTime(e){
				let self = this;
				let timeIndex = e.target.value;
				self.timeIndex = timeIndex;
				self.time = self.orderTime[timeIndex].time;
				self.getData();
			},
			getData(){
				let self = this;
				let data = {
					size:self.size, 
					page:self.page,
					type:self.type,
					status:self.status,
					time:self.time
				}
				self._get('order/list',data,function(res){
					self.orderList = res.data.list;
					self.page = res.data.page;
					console.log(self.orderList);
					
				});
			}
			
		}
	}
</script>

<style lang="scss">
	view,
	text,
	input,
	textarea {
		box-sizing: border-box;
	}

	page {
		background: #F1F1F1;
	}
	.list{
		overflow: hidden;
		width: 100%;
		padding-left: 20rpx;
		background: #fff;
		.item{
			overflow: hidden;
			padding: 20rpx 20rpx 0 0;
			border-bottom: 1px solid #F1F1F1;
			height: 200rpx;
			.tit{
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.fl{
					font-size: 23rpx;
					color: #CECECE;
				}
				.fr{
					font-size: 23rpx;
					color: #0091FF;
				}
			}
			.font{
				display: block;
				font-size: 25rpx;
				margin-top: 15rpx;
				color: #959595;
				line-height: 38rpx;
			}
			.btn{
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				border-radius: 40rpx;
				margin-top: 20rpx;
				float: right;
				color: #FA6400;
				border: 1px solid #FA6400;
				width: 130rpx;
				height: 45rpx;
			}
		}
	}
	.select_box{
		overflow: hidden;
		width: 100%;
		height: 80rpx;
		background: #fff;
		margin-bottom: 20rpx;
		.item{
			overflow: hidden;
			width: 33.33%;
			height: 100%;
			display: flex;
			align-items: center;
			float: left;
			justify-content: center;
			.uni-input{
				font-size: 26rpx;
				color: #969696;
			}
			.iconfont{
				margin-left: 20rpx;
				color: #2D2D2D;
			}
		}
	}

	.content {
		overflow: hidden;
		width: 100%;
		position: relative;

		.header {
			overflow: hidden;
			width: 100%;
			background-image: url(../../static/fawu_06.jpg);
			background-size: 100% 33rpx;
			background-repeat: no-repeat;
			background-position: bottom center;
			height: 155rpx;
			background-color: #153B33;
			position: relative;
			padding: 60rpx 0 0 0;

			.box {
				overflow: hidden;
				width: 100%;
				display: flex;
				position: relative;
				align-items: center;
				justify-content: center;

				.title {
					font-size: 28rpx;
					color: #DBAC53;
				}
				
				.icon-left{
					color: #DBAC53;
					position: absolute;
					left: 17rpx;
					font-size: 35rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}
	}
</style>
